<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">商品GID</label></label>
            <div class="layui-input-block">
                <input type="text" name="gid" lay-verify="required" lay-reqtext="商品GID" placeholder="请输入商品GID" value=""
                    class="layui-input">
                <tip>填写商品GID。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">生成数量</label></label>
            <div class="layui-input-block">
                <input type="text" name="num" lay-verify="required" lay-reqtext="生成数量" placeholder="请输入生成数量" value="1"
                    onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" class="layui-input">
                <tip>填写生成数量。</tip>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认生成</button>
            </div>
        </div>
    </div>
</div>
<script src="//cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
    layui.use(['form', 'table', 'ajax'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$,
            request = layui.ajax;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        // 复制


        //监听提交
        form.on('submit(saveBtn)', async function (data) {
            data = data.field
            const res = await request.post('/addCardList', data, true);
            if (res.code === 200) {
                layer.alert(res.msg + '<hr>' + res.data.join('<br>') + '<hr>请记得复制保存，卡密只会显示一次！', {
                    btn: ['继续添加', '复制纯卡密', '复制链接卡密', '关闭'],
                    btnClass: ['btn-primary', 'btn-default'],
                    icon: 1,
                    area: 'auto',
                    maxWidth: '350px',
                    btn1: function () {
                        location.reload();
                    },
                    btn2: function () {
                        // 获取需要复制的内容
                        var text = res.data.join('\n');
                        // 复制文本
                        var clipboard = new ClipboardJS('.layui-layer-btn1', {
                            text: function () {
                                return text;
                            }
                        });
                        clipboard.on('success', function (e) {
                            layer.msg('复制成功');
                            return false;
                        });
                        clipboard.on('error', function (e) {
                            layer.msg('复制失败');
                            return false;
                        });
                        return false;
                    },
                    btn3: function () {
                        var url = window.location.origin
                        var text = res.data.map(item => {
                            return url + '/?' + item
                        }).join('\n');
                        var clipboard = new ClipboardJS('.layui-layer-btn2', {
                            text: function () {
                                return text;
                            }
                        });
                        clipboard.on('success', function (e) {
                            layer.msg('复制成功');
                            return false;
                        });
                        clipboard.on('error', function (e) {
                            layer.msg('复制失败');
                            return false;
                        });
                        return false;
                    },
                    btn4: function () {
                        layer.close(parentIndex);
                    }

                });
            } else {
                layer.alert(res.msg, {
                    icon: 2
                });

            }

            return false;
        });

    });
</script>